import React from 'react'

//导入评论项 子组件
import CMTBox from '@/components/Comment/CMTBox'
import CmtItem from '@/components/Comment/CmtItem'
export default class CmtList extends React.Component{
    constructor(){
        super()
        this.state = {
            CommentList:[ //评论列表数据
                {id:1,user:'张三',content:'哈哈 沙发'},
                {id:2,user:'李四',content:'国服第一，不服来战'},
                {id:3,user:'王五',content:'你真是个棒槌，带死你'},
                {id:4,user:'赵六',content:'楼下是个山炮，不嫌丢人吗？？？😆'},
            ]
        }
    }
    //在组件尚未渲染的时候，立刻获取数据
    componentWillMount(){
        this.loadCmts()
    }
    render(){
        return <div>
            {/* 在jsx中如果想写行内样式，不能为style设置字符串的值 */}
            {/* 而是应该这么写  style={{color:'red'}} */}
            {/* <h1 style="color:red">这是评论列表组件</h1> */}
            {/* 在行内样式中如果是 数值类型的样式，则可以不用引号包裹，如果是字符串类型的样式值，必须要用引号包裹 */}
            <h1 style={{color:'red',fontSize:'35px',zIndex:3,fontWeight:900,textAlign:'center'}}>这是评论列表组件</h1>
            <CMTBox reload={this.loadCmts}></CMTBox>
            {this.state.CommentList.map(item => <CmtItem {...item} key={item.id}></CmtItem>)}
        </div>
    }

    //加载评论内容
    loadCmts= ()=>{
        var list = JSON.parse(localStorage.getItem('cmts') || "[]");
        console.log(list)
        this.setState({
            CommentList:list
        })
    }
}